<template>
  <!--Vue3组件中的模板结构可以没有根标签-->
  <h1>我是App组件</h1>
  <h2>姓名{{ person.name }}</h2>
  <h2>年龄{{ person.age }}</h2>
  <h2>{{ person.job.type }}</h2>
  <h2>{{ person.job.salary }}</h2>
  <h2>{{ person.hobby }}</h2>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import {reactive} from 'vue';

export default {
  name: 'App',
  setup() {
    // 响应式对象/数组数据 本质是个Proxy对象
    let person = reactive({
      name: '张三',
      age: 23,
      job: {
        type: '前端',
        salary: '30k'
      },
      hobby: ['学习', '睡觉', '打豆豆']
    });

    function changeInfo() {
      person.name = '李四';
      person.age = 26;
      person.job.type = 'Java工程师';
      person.job.salary = '40k';
      person.hobby[0] = '吃饭'
    }

    // 返回一个对象
    return {
      person,
      changeInfo
    };
  }
}
</script>

<style>
</style>
